<template>
  <el-select 
    v-bind="$attrs"
    filterable 
    remote
    clearable 
    reserve-keyword 
    :remote-method="remoteMethod" 
    :loading="loading"
    v-on="$listeners">
    <el-option v-for="item in options" :key="item.id" :value="item.value" :label="item.label"></el-option>
  </el-select>
</template>

<script>
import { getProductTitle } from '@/api/product/productBasic.js'
export default {
  props: {
    siteId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      options: [],
      list: [],
      loading: false,
    }
  },
  methods: {
    async remoteMethod(query) {
      if (query !== '') {
        if(!this.list.length) {
          this.loading = true
          await getProductTitle({ site_id: this.siteId }).then(res => {
            this.list = res.data
          }).finally(() => {
            this.loading = false;
          })
        }
        this.options = this.list.filter(item => {
          return item.label
            .indexOf(query) > -1;
        });
      } else {
        this.options = []
      }
    }
  }
}
</script>